<template>
	<view class="container">
		<view class="dflex-c pos-r margin-bottom margin-top">
			<view class="portrait-box">
				<image class="border-radius-c" :src="member.member_headimg || '/static/images/user/default.png'">
				</image>
			</view>
			<!-- <view class="margin-left-sm">
				<view>
					<text class="username">{{ userName }}</text>
				</view>
				<view v-if="member.member_city"><text>{{ member.member_city }}</text></view>
			</view> -->
		</view>
		<view class="use-item padding-lr dflex-b">
			<text class="tac">昵称</text>
			<input v-model="userName" @blur="changeUserName" type="nickname" class="userName" />
			<!-- <text>{{ member.member_name || member.member_nickname || '微信用户' }}</text> -->
		</view>
		<view class="gap"></view>
		<view class="use-item padding-lr dflex-b">
			<text class="tac">性别</text>
			<!-- 性别选择器 -->
			<picker @change="changeUserGender" :value="userGender" :range="genderArray">
				<text>{{ (Gender == '未知' ? '未知' : Gender == 1 ? '男' : '女') || '未知' }}</text>
			</picker>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member']),
			...mapGetters(['Gender']),
		},
		data() {
			return {
				userName: '',
				userGender: 0,
				genderArray: ['男', '女'],
			};
		},
		onShow() {
			if (!this.islogin) {
				this.$api.msg('账号未登录');
				return;
			}
			
			this.userName = this.member.member_name || this.member.member_nickname || '微信用户';
		},
		methods:{
			...mapMutations(['updateUserName', 'updateUserGender']),
			changeUserName(e) {
				this.$func.usemall.call('member/update', {
					nickname: this.userName,
				}).then(res => {
					if (res.code == 200) {
						this.updateUserName(this.userName);
						uni.showToast({
							title: '修改成功',
							icon: 'none',
						})
					}
				})
			},
			changeUserGender(e) {
				console.log(e.detail.value);
				this.userGender = e.detail.value;
				
				this.$func.usemall.call('member/update', {
					member_gender: Number(e.detail.value) + 1,
				}).then(res => {
					if (res.code == 200) {
						this.updateUserGender(Number(e.detail.value) + 1);
						uni.showToast({
							title: '修改成功',
							icon: 'none',
						})
					}
				})
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}

	image {
		width: 130rpx;
		height: 130rpx;
	}

	.use-item {
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		background: #fff;
		
		.userName {
			text-align: right;
		}
	}
</style>
